<template>
  <div id="root" class="root-container">
    <!-- 标题栏 -->
    <template v-if="!isFullScreen">
      <Header />
    </template>
    <div class="content-container">
      <!-- 用来展示悬浮的图层 -->
      <Layer />
      <!-- 用来展示各种图表的图层 -->
      <ChartLayer />
      <!-- 全屏组件 -->
      <PopMenu />
    </div>
  </div>
</template>

<script setup lang="ts">
import Layer from "./Layer/index.vue";
import ChartLayer from "./ChartLayer/index.vue";
import PopMenu from "./components/PopMenu/index.vue";
import Header from "./components/Header/index.vue";
import { useCommonStore } from "@/stores/common";
import { computed } from "vue";

const commonStore = useCommonStore();

const isFullScreen = computed(() => commonStore.isFullScreen);
</script>

<style lang="scss" scoped>
.root-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.content-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.full-screen-button-container {
  position: absolute;
  top: 0;
  right: 100px;
}
</style>
